<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1000" ref="dialogBodyRef" @open="openDialog">
  
    <!-- 列表 -->
    <ContentWrap>
        <el-table v-loading="loading" :data="list">
          <el-table-column type="index" label="序号" align="center" width="55" />
          <el-table-column label="织板编码" align="center" prop="materialCode" />
          <el-table-column label="物料名称" align="center" prop="materialName" />
          <el-table-column label="批次号" align="center" prop="code" />
          <el-table-column label="供应商" align="center" prop="supplierName" />
          <el-table-column label="入库时间" align="center" prop="receiptDate" />
          <el-table-column label="应收数量" align="center" prop="receivableNum" />
          <el-table-column label="实收数量" align="center" prop="actualNum" />
          <el-table-column label="单位" align="center" prop="unit" />
          <el-table-column label="部门" align="center" prop="dept" />
          <el-table-column label="操作员" align="center" prop="operator" />
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </ContentWrap>
  </Dialog>
  </template>
  
  <script lang="ts" setup>
  import * as maStorageReportApi from '@/api/hcxly/materialStorageReport/Index'
  
  defineOptions({ name: 'maReportDetail' })
  
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据
  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的标题

  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    receiptCode: ''
  })
  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中

    /** 打开弹窗 */
    const open = async (id: string) => {
      openDialog()
    queryParams.receiptCode = id
    console.log(id)
    console.log(queryParams)
    dialogVisible.value = true
    dialogTitle.value = '详情'
    // 修改时，设置数据
    if (id) {
      getList()
    }
  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗
  
  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await maStorageReportApi.getMaStoDetail(queryParams)
      console.log(data)
      list.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }
  
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }
  
  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }

  /** 初始化 **/
  // onMounted(() => {
  //   getList()
  // })

  /** 设置dialog高度 */
  const dialogBodyRef = ref()
  const openDialog = () => {
  // 获取对话框 body 的 DOM 元素
  const dialogBodyRefInstance = dialogBodyRef.value;
  console.log(dialogBodyRefInstance.dialogContentRef);
  dialogBodyRefInstance.style = "height: 200px";
}
  
  </script>
